<template>
  <div>
    <!--    编辑/添加表单-->
    <el-form v-show="dialogFormVisible" :model="listData" :rules="unitMeasureRules" ref="unitMeasureRulesForm ">

      <el-card class="box-card" :title="title" style="width: 340px;margin-top: 10px ;margin-left:30px;height: 600px">
        <h4>车主基本信息：</h4>
          <el-form-item label="车主姓名:" prop="cname">
            <el-input size="small " style="width: 200px" v-model="listData.cname" autocomplete="on"/>
          </el-form-item>
          <el-form-item label="联系方式" prop="cname">
            <el-input size="small " v-model="listData.phone" autocomplete="on" style="width: 200px"/>
          </el-form-item>
          <el-form-item label="人员性别" prop="quantity">
            <el-input size="small " v-model="listData.sex" autocomplete="off" style="width: 200px"/>
          </el-form-item>
          <el-form-item label="单位名称" prop="quantity">
            <el-input size="small " v-model="listData.unit" autocomplete="off" style="width: 200px"/>
          </el-form-item>
          <el-form-item label="所属楼宇" prop="quantity">
            <el-input size="small " v-model="listData.build" autocomplete="off" style="width: 200px"/>
          </el-form-item>
          <el-form-item label="房间名称" prop="quantity">
            <el-input size="small " v-model="listData.room" autocomplete="off" style="width: 200px"/>
          </el-form-item>
          <el-form-item label="人脸照片" prop="quantity">
            <el-input size="small " v-model="listData.quantity" autocomplete="off" style="width: 200px"/>
          </el-form-item>

      </el-card>

      <el-card class="box-card" :title="title"
               style="width: 650px;margin-top: -600px;margin-left:400px;height: 600px"
      >
        <h4>车辆账单信息：</h4>


          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="车辆类型:" prop="cname">
                <el-input size="small " style="width: 150px" v-model="listData.ctype == '1' ? '临时车' : '包月车' " autocomplete="on"/>
              </el-form-item>
              <el-form-item label="车辆品牌" prop="cname">
                <el-input size="small " v-model="listData.cmodel" autocomplete="on" style="width: 150px"/>
              </el-form-item>
              <el-form-item label="开始时间" prop="quantity">
                <el-input size="small " v-model="listData.startTime" autocomplete="off" style="width: 150px"/>
              </el-form-item>
              <el-form-item label="是否缴费" prop="quantity">
                <el-input size="small " v-model="listData.quantity" autocomplete="off" style="width: 150px"/>
              </el-form-item>
              <el-form-item label="缴费凭证" prop="quantity">
                <el-input size="small " v-model="listData.quantity" autocomplete="off" style="width: 150px"/>
              </el-form-item>
            </el-col>
            <el-col :span="14" >
              <el-form-item label="车牌号码" prop="quantity">
                <el-input size="small " v-model="listData.lpn" autocomplete="off" style="width: 200px"/>
              </el-form-item>
              <el-form-item label="车辆型号" prop="quantity">
                <el-input size="small " v-model="listData.cmodel" autocomplete="off" style="width: 200px"/>
              </el-form-item>
              <el-form-item label="结束时间" prop="quantity">
                <el-input size="small " v-model="listData.endTime" autocomplete="off" style="width: 200px"/>
              </el-form-item>
              <el-form-item label="缴费金额" prop="quantity">
                <el-input size="small " v-model="listData.pay" autocomplete="off" style="width: 200px"/>
              </el-form-item>
            </el-col>
          </el-row>

      </el-card>


      <el-button
        type="primary"
        style="margin-top: 10px;margin-left: 440px"
        @click="baoCun"
      >保存
      </el-button>
      <el-button
        type="primary"
        style="margin-top: 10px;margin-left: 40px"
        @click="baoCun"
      >取消
      </el-button>

    </el-form>


    <el-form :inline="true" :model="lpn" ref="searchForm" class="demo-form-inline"
             style="padding-top: 10px;margin-left: 15px"
             v-show="!dialogFormVisible"
    >


      <div>
        <el-card style="height: 60px">
          <span>车辆缴费账单</span>
          <div style="margin-top: -25px">
            <el-button style="margin-left: 85%" size="small" type="primary" @click="classAdd">新增</el-button>
            <el-button size="small" type="warning" style="margin-left: 30px" @click="del">批量删除</el-button>
          </div>
        </el-card>
      </div>
      <!-- 搜索框 -->

      <el-form-item>
        <el-input v-model="lpn" placeholder="请输入车辆号码" style="margin-top: 10px"></el-input>
      </el-form-item>
      <!--查询-->
      <el-form-item>
        <el-button type="primary" @click="search" style="margin-top: 10px">查找</el-button>
      </el-form-item>

    </el-form>


    <!--    表单-->
    <el-table lazy v-loading="loading" :data="carlList" @selection-change="handleSelectionChange"
              v-show="!dialogFormVisible"
    >
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="车主姓名" align="center" prop="cname"/>
      <el-table-column label="联系方式" align="center" prop="phone"/>
      <el-table-column label="车牌号码" align="center" prop="lpn"/>
      <el-table-column label="车辆型号" align="center" prop="cmodel"/>
      <el-table-column label="车辆类型" align="center" prop="ctype">
        <template slot-scope="scope">
          <el-tag >
            <span>{{ scope.row.ctype == '1' ? '临时车' : '包月车' }}</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="缴费金额" align="center" prop="pay"/>
      <el-table-column label="缴费时间" align="center" prop="payTime"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >详情
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <span class="demonstration"/>
    <el-pagination
      style="margin-right: 14px; margin-top: 10px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 7, 10,15,20]"
      :page-size="100"
      layout=" ->, total, sizes, prev, pager, next, jumper"
      :total="total"
      v-show="!dialogFormVisible"
    >
    </el-pagination>
  </div>
</template>

<script>
import { Delete, deletePcht, getList } from '@/api/bill/car'
export default {
  data() {
    return {
      ids:[],
      pupilDelList: [],
      juk: null,
      unitMeasureRules: {
        cname: [
          { required: true, message: '请输入课程名字', trigger: 'blur' }
        ],
        teacher: [
          { required: true, message: '请输入讲师名字', trigger: 'blur' }
        ],
        quantity: [
          { required: true, message: '请输入教室人数', trigger: 'blur' }
        ]
      },

      dialogFormVisible: false,
      listData: {
        id: null,
        cname: null,
        phone: null,
        lpn: null,
        cmodel: null,
        ctype: null,
        pay: null,
        payTime: null,
        startTime: null,
        endTime: null,
        sex: null,
        unit: null,
        build: null,
        room: null,
      },
      title: '',
      lpn: '',
      carlList: [],
      // 加载遮罩层
      loading: true,
      // 分页
      pageNum: 1,
      currentPage: 1,
      total: 0,
      pageSize: 5
    }
  },
  methods: {

    fetchData() {
      let params = {
        pageNum: this.pageNum,// 分页
        pageSize: this.pageSize,// 每页数据数量
        lpn: this.lpn
      }
      console.log(params)
      getList(params).then(res => {

        let pageInfo = res.data
        this.loading = false
        this.carlList = pageInfo.list
        // this.total = pageInfo.totalnpm
        this.listData = pageInfo.list

      })
    },
    // 新增课程
    classAdd() {
      this.listData = {}
      this.dialogFormVisible = true
      this.title = '新增课程'
    },

    // 批量删除
    del() {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          ids: this.ids.join(',')
        }
        deletePcht(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })

    },

    // 删除

    handleDelete(row) {
      let params = {
        id: row.id
      }
      console.log("cid",params)
      Delete(params).then(res => {
        if (res.data) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        } else {
          this.$message.error('删除失败')

        }
        this.fetchData()
        // alert('删除成功!')
        // this.fetchData()
      })
    },

    baoCun() {
      this.dialogFormVisible = false
    },
    // 编辑
    handleUpdate(row) {
      this.listData = row
      this.dialogFormVisible = true
      this.title = '编辑'
    },
    updateMeasure() {
      if (this.title === '编辑') {
        UpDate(this.listData).then(res => {
          if (res.data) {
            this.$message({
              message: '编辑成功',
              type: 'success'
            })
          } else {
            this.$message.error('编辑失败')
          }
          this.fetchData()
        })
      } else if (this.title === '新增课程') {
        AddFind(this.listData).then(res => {
          if (res.data) {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          } else {
            this.$message.error('添加失败')
          }
          this.fetchData()
        })
      }
      this.dialogFormVisible = false
    },
    // 模糊查找
    search() {

      this.fetchData()
    },

    // 多选框ID
    handleSelectionChange(selection) {
      console.log("selection",selection)
     this.ids = []
      for (let i = 0; i < selection.length; i++) {
        this.ids.push(selection[i].id)
      }
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.fetchData()
    }

  },

  created() {
    this.fetchData()
  }
}
</script>

<style scoped lang="scss">

</style>
